<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <div id="app">
            <h4>请选择你喜欢的专栏</h4>
            <span v-for="item in List" :key="item.id"><input type="checkbox" v-model="item.isChecked">{{item.name}}</span>

            <ul>
                <li v-for="(item,index) in hahalist" :key="index">{{item.name}}</li>
            </ul>
        </div>
        <script src="./lib/vue.js"></script>
        <script>
            new Vue({
                el: '#app',
                data: {
                    // arr:['科幻','喜剧','动漫','冒险','军事','娱乐','奇闻']
                    List: [
                        {
                            id:1,
                            name: '科幻',
                            isChecked: false
                        },
                        {   id:2,
                            name: '喜剧',
                            isChecked: false
                        },
                        {   
                            id:3,
                            name: '动漫',
                            isChecked: false
                        },
                        {
                            id:4,
                            name: '冒险',
                            isChecked: false
                        },
                        {   id:5,
                            name: '军事',
                            isChecked: false
                        },
                        {
                            id:6,
                            name: '娱乐',
                            isChecked: false
                        },
                        {
                            id:7,
                            name: '奇闻',
                            isChecked: false
                        },
                    ],
                    hahalist: []
                },
                watch: {
                    List: {
                        deep: true,
                        handler(newVal) {

                            console.log(newVal)
                            this.hahalist=this.List.filter(item=>item.isChecked)
                        }
                    }
                },
            })
        </script>
    </div>
</body>

</html>